<template>
  <div class="main">
    <div class="outDiv">
      <scroller lock-x>
        <div style="padding-top: 0.2rem;">
          <go-back aa='history'></go-back>
          <div class="mainDiv">
            <h2 class="title">录取概率查询</h2>
            <div class="topicArea">
              <p>“目标批次”必须选择自己高考位次所在的批次</p>
              <p>“目标院校”必须选择填写“目标批次”对应的院校</p>
            </div>

            <div class="chooseArea">
              <ul class="radio">
                <li @click="chooseRadio('1')">
                  <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-if="choRadio" />
                  <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                  <span class="text">理科</span>
                </li>
                <li @click="chooseRadio('2')">
                  <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-if="choRadio" />
                  <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-else />
                  <span class="text">文科</span>
                </li>
              </ul>
              
              <!-- 考生省份 -->
              <div class="inputBlock">
                <div class="selectList">
                  <div class="absBox">
                    <h4 class="title">考生省份</h4>
                    <div class="content" @click='isShow_prov=true'>
                      <span :class="value1.length !== 0 ? 'hasValue' : 'plhd'">{{ value1.length !== 0 ? value1[0] : '请选择您的省份' }}</span>
            
                       <i class="right-gray"></i>
                    </div>
                  </div>
                </div>
                <popup-picker 
                  :show.sync="isShow_prov" 
                  popup-title="省份"
                  :data="cityList" 
                  :columns="1" 
                  v-model="value1" 
                  show-name
                  @on-change="changes" 
                  @on-hide="onHide"
                ></popup-picker>
              </div>
              
              <!-- 考生批次 -->
              <div class="inputBlock">
                <div class="selectList">
                  <div class="absBox">
                    <h4 class="title">目标批次</h4>
                    <div class="content" @click='showPici'>
                      <span :class="value2.length !== 0 ? 'hasValue' : 'plhd'">{{ value2.length !== 0 ? value2[0] : '请选择您的目标预测批次' }}</span>
      
                      <i class="right-gray"></i>
                    </div>
                  </div>
                </div>
                <popup-picker 
                  :show.sync="isShow_pici" 
                  :data="batchList" 
                  :columns="1" 
                  v-model="value2" 
                  show-name
                  @on-change="changes2" 
                   @on-hide="onHide2"
                ></popup-picker>
              </div>
              
              <!-- 考生位次 -->
              <div class="inputBlock">
                <h2 class="title">位次</h2>
                <input type="number" placeholder="请填写您真实或预测的考试位次" v-model="inputValue" v-on:blur="blurAdjust" v-on:input ="handleInputChange"/>
              </div>
              
              <!-- 目标院校 -->
              <div class="inputBlock">
                <div class="selectList">
                  <div class="absBox">
                    <h4 class="title">目标院校</h4>
                    <div class="content" @click='isPopupShow=true'>
                      <span :class="school.length !== 0 ? 'hasValue' : 'plhd'">{{ school.length !== 0 ? school : '请选择您的目标预测院校' }}</span>
                      <i class="right-gray"></i>
                    </div>
                  </div>
                </div>
                <PopSelect :popupShow="isPopupShow" 
                  placeholderText="请选择您的目标预测院校" status="2" 
                  @closePopUp="changeStatus"
                  @sendObj="listContentChange"
                  :choMajorType="choMajorType"
                  :province="city"
                  :level="pici"
                ></PopSelect>
              </div>

              <button class="btn" :disabled="searchBtn" @click="searchResult">开始查询</button>

              <div class="history">
                <span @click="watchHistory">查看历史记录</span>
              </div>

            </div>  
          </div>
          <div style="width: 100%; height: 0.5rem;"></div>
        </div>
      </scroller>      
    </div>

    <div class="x-daliag-wrap" v-show="dialogShow">
      <div class="x-daliag-box">
        <h3>请确认您所填信息准确无误，绑定卡劵后您的信息将不能修改!</h3>
        <div class="x-box">
          <span :class="['x-daliag-sp', 'x-input',spIndex===100?'active':'']" @click="hexiao1"><input type="text"
              placeholder="请输入您的卡劵号码" v-model="copus" v-on:blur="commonJs.blurAdjust" /></span>
        </div>
        <div class="pos_bot_wrap">
          <h3 class="both3">点击购买前往升学商城购买本服务，或输入商品卡券号兑换此服务。</h3>
          <div class="btnGroup flex-h">
            <button class="reset flex1" @click="goToBuyCard">购买</button>
            <button class="submit flex1" @click="sureCoupon">确定</button>
          </div>
        </div> 

        <div class="xxBox">
          <span class="xxsp" @click="dialogShow=false">
            <img src="~/static/images/volunteer_icon_close.png" alt="">
          </span>
        </div>
      </div>
    </div>
		<call-taost :show="showCall" :phone='18971638225' @cancel="gos">
			<a slot="body" class="call">考生信息或者偏好填写有误，请致电 18971638225 或微信添加 sxzxxq 咨询相关工作人员</a>
		</call-taost>

  </div>  
</template>

<script>
import goBack from '~/components/goBack'
import PopSelect from '~/components/probabilitySelect'
import { matriculateProbabilities, saveExaminee, getUsage, verification, getState } from "~/api/matriculate";
import { getProvince, getLevel } from "~/api/volunteer";
// import { coupons } from "~/api/mall"
import ls from 'store2'
import callTaost from '~/components/callTaost'
import { PopupPicker, Picker, XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
  components: {
    goBack,
    PopupPicker,
    Picker,
    PopSelect,
    XDialog,
		callTaost
  },
  directives: {
    TransferDom
  },
  data() {
    return {
			showCall:false,
      maxlength: 6,
      minlength: 1,
      yxkData: ls.get('yxkData'),
      userType: ls.get('userType'),

      choRadio: true,
      choMajorType: '理科',
      cityList: [], // 省份
      value1: [],
      city: '',
      isShow_prov: false,

      batchList: [], // 批次
      value2: [],
      pici: '',
      isShow_pici: false,
      
      school: '', // 院校
      choSchoolCode: '',
      isPopupShow: false,
      inputValue: '', // 位次
      cardMsg: ls.get('cardVolume'),

      hasCard: false, // 判断该账户是否拥有卡券
      cardList: [], // 卡券集合
      dialogShow: false, // ‘您尚未购买录取概率查询服务， 是否前往购买？’  --->  弹出框

      usedCards: [], // 已核销卡券集合
      searchBtn: false,

      copus: '',
      spIndex: 0,

      saveParams: {}, // 保存数据

      changeTimes: 0 ,
      piciChangeTimes: 0,

    }
  },
  mounted() {
    this.getCascadeArea();
    this.getUsedCardList();
    ls.set('backUrl', '../matriculate/history');
    if (!ls.get('cardVolume')) {
      // this.getCardMsg();
    } else {
      this.hasCard = true;
    }

    if (this.commonJs.GetUrlParam('pay_status') == 'success') {

      this.choRadio = ls.get('saveParams').choRadio;
      this.choMajorType = ls.get('saveParams').choMajorType;

      this.city = ls.get('saveParams').city;
      this.value1 = ls.get('saveParams').value1;
      this.getPiCi(this.city);
      this.value2 = ls.get('saveParams').value2;
      this.pici = ls.get('saveParams').pici;
      this.school = ls.get('saveParams').school;
      this.choSchoolCode = ls.get('saveParams').choSchoolCode;
      this.inputValue = ls.get('saveParams').inputValue;

      this.$vux.toast.text("支付成功");
    } else if (this.commonJs.GetUrlParam('pay_status') == 'failed') {
      this.$vux.toast.text("支付失败，请重新支付");
    } 
  },
  methods: {
		gos(){
      this.showCall = false
    },
    showPici() {
      if (this.value1.length == 0) {
        this.$vux.toast.text('请选择考生省份');
      } else {
        this.isShow_pici=true
      }
    },

    sureCoupon() {
      if (this.copus == '') {
        this.$vux.toast.text('请输入卡券信息');
      } else {
        this.cardMsg = this.copus;
        ls.set('cardVolume', this.copus);
        this.getVerification();
      }
    },

    hexiao1() {
      this.spIndex = 100;
    },


    chooseRadio(type) {
      type === '1' ? this.choRadio = true : this.choRadio = false;
      type === '1' ? this.choMajorType = '理科' : this.choMajorType = '文科';
      this.choSchoolCode = '';
      this.school = '';
    },

    // 录取概率查询结果 --- 生成查询结果
    getSchoolMessage() {
      this.$loading('open');
     matriculateProbabilities({
        userType: this.userType,
        volume: ls.get('cardVolume')
      }).then(res => {
        if (res.code == '0') {
          const sendObj = {
            history: JSON.stringify(res.data),
            academyName: res.data.acadName
          };
          this.goto('/matriculate/results', sendObj);
          ls.remove('cardVolume');
        } else if(res.code = '1200004') {
					this.showCall=true
				}else{
          this.$vux.toast.text(res.message)
          this.$router.push('/matriculate/indexs');
        }
        this.$hideLoading();
      }).catch((error) => {
        this.$vux.toast.text(error);
        this.$vux.toast.hide();
      }) 
    },

    // 获取卡券
    getCardMsg() {
//      coupons({
//         sx_uid: this.yxkData.userVoId,
//         product_code: 'sx0040',
//       }).then(res => {
//         if (res.data.length > 0) {
//           this.cardMsg = res.data[0];
//           if (!ls.get('cardVolume')) {
//             ls.set('cardVolume', res.data[0]);
//           }
//           this.cardList = res.data;
//           this.hasCard = true;
//         } else {
//           if (ls.get('cardVolume')) {
//             this.hasCard = true;
//             this.cardList.push(ls.get('cardVolume'));
//           } else {
//             this.cardList = [];
//             this.hasCard = false;
//           }
//         }
//       }).catch((error) => {
//         this.$vux.toast.text(error);
//         this.$vux.toast.hide();
//       })
    },
    // 保存考生信息
    saveExaminee() {
      saveExaminee({
        academy: this.choSchoolCode,
        division: this.choMajorType,
        level: this.pici,
        precedence: this.inputValue,
        province: this.city,
        volume: this.cardMsg
      }).then(res => {
        this.$hideLoading();
        this.searchBtn = false;
        if (res.message == '操作成功') {
          this.getSchoolMessage();
        } else {
          this.$vux.toast.show('保存信息失败，请重试！');
        }
      })
    },
    // 查询商品卡券使用情况
    getUsage() {
      getUsage({
        volume: this.cardMsg
      }).then(res => {
        if (res.code == '0') {
          if (res.data[0].surplusCount > 0) {
            this.saveExaminee();
          } else {
            this.$hideLoading();
            this.searchBtn = false;
            this.dialogShow = true;
          }
        }
      })
    },
    // 开始查询
    searchResult() {
      this.searchBtn = true;
      this.$loading('open');
      if (this.choSchoolCode == '' || this.choMajorType == '' || this.pici == '' || this.inputValue == '' || this.city == '') {
        this.$hideLoading();
        this.searchBtn = false;
        this.$vux.toast.text('信息不全，请补齐！');
      } else if (this.inputValue.length > 6) {  
        this.$hideLoading();
        this.searchBtn = false;
        this.$vux.toast.text('位次超出可查范围，请重新输入位次！');
      } else {
        if (!this.hasCard) {
          this.dialogShow = true;
          this.$hideLoading();
          this.searchBtn = false;
        } else {
          this.dialogShow = false;
          const cardVolume = ls.get('cardVolume');
          let isUsedCard = this.usedCards.indexOf(cardVolume) !== -1;
          if (ls.get('cardVolume') && isUsedCard) {
            this.getUsage();
          } else {
            this.getVerification();
          }
        }
      }
    },
    // 商品卡券核销
    getVerification() {
      verification({
        uid: this.yxkData.userVoId,
        userType: this.userType,
        volume: this.cardMsg
      }).then(res => {
        if (res.message == '操作成功') {
          this.saveExaminee();
        } else {
          this.$vux.toast.text(res.message);
          this.$hideLoading();
          this.searchBtn = false;
        }
      })
    },

    // 获取已核销的卡券信息
    getUsedCardList() {
      this.$loading('open');
      getState(ls.get('userType')).then(res => {
        if (res.code == 0) {
          let arr = [];
          for (const item of res.data) {
            arr.push(item.volume);
          }
          this.usedCards = arr;
        } else {
          this.$vux.toast.text('网络故障');
        }
      }).catch(error => {
        this.$vux.toast.text(error);
      })
    },

    dialogCancel() {
      this.dialogShow = false;
    },
    goToBuyCard() {
      this.dialogShow = false;

      this.saveParams = {
        choRadio: this.choRadio,
        choMajorType: this.choMajorType,
        city: this.city,
        value1: this.value1,
        batchList: this.batchList,
        pici: this.pici,
        value2: this.value2,
        school: this.school,
        choSchoolCode: this.choSchoolCode,
        inputValue: this.inputValue,
      }

      ls.set('saveParams', this.saveParams)
      
      let url = encodeURIComponent(process.env.workUrl + "/wx-yxk/#/matriculate/indexs")
      this.commonJs.checkCodeVip("sx0040", url,process.env.mallGlId)
    },

    // 获取省份信息
    getCascadeArea() {
      this.$loading('open');
     getProvince().then(res => {
        if (res.code === '0') {
          let areaData = res.data;
          let arrArea = [];
          areaData.forEach((item, index) => {
            arrArea.push(item)
          })
          // arrArea.push(areaData);
          this.cityList = arrArea

        } else {
          this.$vux.toast.text(res.message)
        }
        this.$hideLoading()
      }).catch(() => {
        this.$hideLoading()
        this.$vux.toast.text('网络错误，请稍后再试！');
      })
    },
    changes(value) {
      this.city = value[0];
      if (this.changeTimes > 0) {
        this.value2 = [];
        this.pici = '';
        this.batchList = [];
        this.choSchoolCode = '';
        this.school = '';
      }
      this.changeTimes += 1;
    },
    onHide(type) {
      type == true ? this.city = this.value1[0] : this.city = this.city;
      this.getPiCi(this.city)
    },
    
    // 获取批次信息
    getPiCi(pro) {
      getLevel(pro).then(res => {
        if (res.code === '0') {
          let ary = [];
          res.data.forEach(item => {
            if (item.indexOf('专') == -1 && item.indexOf('三') == -1 && item.indexOf('四') == -1) {
              ary.push(item)
            }
          })
          this.batchList = ary
        }
      }).catch(() => {
        this.$vux.toast.text('网络错误，请稍后再试！');
      })
    },
    changes2(value) {
      this.pici = value[0];
      if (this.piciChangeTimes > 0) {
        this.choSchoolCode = '';
        this.school = '';
      }
      this.piciChangeTimes += 1;
    },
    onHide2(type) {
      type == true ? this.pici = this.value2[0] : this.pici = this.pici;
    },

    // 位次修改
    handleInputChange(event) {
        this.choSchoolCode = '';
        this.school = '';
    },

    // 目标院校
    changeStatus() {
      this.isPopupShow = false;
    },
    listContentChange(obj) {
      this.school = obj.academyName;
      this.choSchoolCode = obj.academyCode;
      this.isPopupShow = false;
    },

    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },

    // 查看历史记录
    watchHistory() {
      this.goto('/matriculate/history');
    },

    blurAdjust(e) {
      setTimeout(() => {
      if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
        return
      }

      let result = 'pc';
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
        result = 'ios'
      } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
        result = 'android'
      }

      if (result = 'ios') {
        document.activeElement.scrollIntoViewIfNeeded(true);
      }
      }, 50)
    },
    onfocus() {
    },
    
  }
}
</script>

<style lang="less" scoped>

  .x-daliag-wrap {
		position: fixed;
		width: 7.5rem;
		height: 100vh;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);

		.x-daliag-box {
			width: 80%;
			height: 80vh;
			margin: 10vh auto;
			background: #fff;
			border-radius: 0.1rem;
			overflow: hidden;
			position: relative;

			.x-box {
				height: auto;

			}

			h3 {
				display: block;
				padding: 0 0.2rem;
				font-size: 0.3rem;
				margin-bottom: 0.3rem;
				text-align: center;
				font-weight: 600;
				// margin-top: 0.2rem;
				margin-top: 1rem;

			}

			.both3 {
				margin-top: 0;
				font-size: 0.26rem;
				font-weight: 400;
			}

			.x-daliag-sp {
				display: block;
				width: 5rem;
				height: 0.8rem;
				text-align: center;
				line-height: 0.8rem;
			
				margin: 0.2rem auto 0rem;
				border: 1px solid #eee;
				border-radius: 0.1rem;
				b{
						
						font-size: 0.3rem;
						font-weight: 600;
						margin-left: 0.2rem;
				}
				i{
					font-size:0.3rem;
					font-family:'PingFangSC-Regular';
					font-weight:400;
					color:rgba(153,153,153,1);
				}
			}

			.active {
				border: 1px solid @mainColor;
				
				b{
					color: @mainColor;
				}
				i{
					color: @mainColor;
				}
			}

			.x-input {
				input {
					outline: none;
					border: none;
					font-size: 0.3rem;
					display: block;
					width: 100%;
					height: 100%;
					padding: 0.1rem 0.3rem;
          box-sizing: border-box;
          border-radius: 0.1rem;
				}
			}

			.pos_bot_wrap {
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.btnGroup {
			width: 5rem;
			margin: 0.3rem auto;

			button {
				height: 0.8rem;
				border-radius: 0.1rem;
				letter-spacing: 0.05rem;
				font-size: 0.36rem;
				font-weight: bold;
			}

			.reset {
				border: 1px solid #EEE;
				background: #FFF;
				color: @mainColor;
				margin-right: 0.2rem;
			}

			.submit {
				border: none;
				background: @mainColor;
				color: #FFF;
			}
		}

		.xxBox {
			position: absolute;

			top: 0rem;
			width: 1rem;
			height: 1rem;
			right: 0;

			.xxsp {
				width: 0.8rem;
				height: 0.8rem;
				display: block;

				margin: 0 auto;


				img {
					width: 0.3rem;
					height: 0.3rem;
					display: block;
					margin: 0.25rem auto;
				}
			}
		}

	}

  .popblock {
    padding: 0.4rem 0.32rem;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    background: #fff;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.16rem;

      .name {
        color: #222;
        font-size: 0.36rem;
        line-height: 0.57rem;
        font-weight: bold;
      }

      img {
        width: 0.4rem;
        height: 0.4rem;
      }

    }

    .describe {
      color: #999;
      font-size: 0.24rem;
      line-height: 0.38rem;
      margin-bottom: 0.4rem;
    }

    .card_list {
      padding-left: 0;
      list-style: none;

      .card_item {
        width: 100%;
        height: 1.4rem;
        border-radius: 0.1rem;
        border: none;
        padding: 0.49rem 0.32rem 0.49rem 0.24rem;
        margin-bottom: 0.32rem;
        background: #F7F7FA;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .number {
          font-size: 0.3rem;
          line-height: 0.42rem;
          color: #222;
        }

        .times {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #222;

          b {
            font-size: 0.4rem;
            line-height: 0.56rem;
            margin-right: 0.08rem;
          }

          span {
            font-size: 0.26rem;
            line-height: 0.37rem;
          }

        }

      }

    }

  }

  .outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.mainDiv {
			padding: 0 0.3rem;
      width: 100%;
      
      h2.title {
        color: #222;
        font-size: 0.4rem;
        line-height: 0.64rem;
        font-weight: bold;
        text-align: center;
        margin: 0.12rem 0 0.32rem;
      }

      .topicArea {
        width: 100%;
        background: #FFF7D4;
        padding: 0.24rem 0.3rem;
        border-radius: 0.08rem;
        margin-bottom: 0.32rem;
        p {
          color: #222;
          font-size: 0.24rem;
          line-height: 0.38rem;
        }
      }

      .chooseArea {
        padding: 0.56rem 0.32rem;
        background: #fff;
        box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
        border-radius: 0.2rem;

        .radio {
					display: flex;
					justify-content: space-between;
					align-items: center;
					list-style: none;
					padding: 0 1.31rem 0.96rem 1.31rem;

					li {
						display: flex;
						align-items: center;

						.text {
							margin-left: 0.33rem;
							font-size: 0.3rem;
              color: #222;
              line-height: 0.42rem;
              font-weight: bold;
            }
            
          }
          
        }

        .inputBlock {
          margin-bottom: 0.32rem;
          .title {
            color: #999;
            font-size: 0.28rem;
            line-height: 0.3rem;
            font-weight: bold;
            text-align: left;
            margin: 0;
          }

          input {
            width: 100%;
            height: 0.88rem;
            line-height: 0.88rem;
            border: none;
            outline: none;
            padding-left: 0;
            border-bottom: 2px solid #E5E8ED;
            color: #222;
            font-size: 0.28rem;
            line-height: 0.4rem;
            border-radius: 0;
          }

        }

        .btn {
          width: 100%;
          height: 0.88rem;
          line-height: 0.88rem;
          background: @mainColor;
          border-radius: 0.5rem;
          text-align: center;
          font-size: 0.3rem;
          color: #fff;
          font-weight: bold;
          letter-spacing: 2px;
          outline: none;
          border: none;
        }
        
      }
      .inputBlock {

        .selectList {
          flex: 1;
          box-sizing: border-box;
          margin-bottom: 0.32rem;
  
          .title {
            color: #999;
            font-size: 0.28rem;
            line-height: 0.3rem;
            font-weight: bold;
          }
  
          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 0.88rem;
            line-height: 0.88rem;
            box-sizing: border-box;
            border-bottom: 2px solid #E5E8ED;
  
            span {
              font-size: 0.28rem;
              line-height: 0.4rem;
            }

            .plhd {
              color: #c7c7c7;
            }

            .hasValue {
              color: #222;
            }

  
          }
          
        }
        /deep/ .weui-cell_access .weui-cell__ft:after { display: none; }

        /deep/ .weui-cell_access { display: none; }
        
        /deep/ .vux-cell-box:not(:first-child):before {
          display: none;
        }
      }

      .history {
        text-align: center;
        margin-top: 0.48rem;

        span {
          color: #999;
          font-size: 0.28rem;
          line-height: 0.3rem;
        }
      }


    }
  }  
  
  .imgIcon {
		width: 0.32rem;
		height: 0.32rem;
  }
  .right-gray{
         	display: inline-block;
					width: 0.4rem;
					height: 0.4rem;
					background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
          background-size:3rem 2.4rem;
  }

</style>
